<template>
  <div class="structure">
    <el-dialog
      :visible.sync="dialogVisible"
      width="900"
      :before-close="handleClose"
      center>
      <div class="center_con">
        <el-row>
          <el-col :span="10">
            <image-preview :src="goods.medImage" width="80%" heigth="80%" style="margin: auto;">

            </image-preview>
          </el-col>
          <el-col :span="14">
            <el-row justify="center">
              <el-col>
                <div style="width: 100%" class="text-center">
                  <h2>{{ goods.medName }}</h2>
                </div>
              </el-col>
            </el-row>
            <el-row justify="center">
              <el-col>
                <p>介绍：{{ goods.medInfo }}</p>
              </el-col>
            </el-row>
            <el-row>
              <p>库存：{{ goods.inventory }}</p>
            </el-row>
            <el-row>
              <el-col>
                <div style="width: 100%" class="text-center">
                  <div class="prize_bar">
                    <div class="show_prize fl">价格：<em>{{ goods.untitled }}</em></div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <div class="goods_num text-center ">
                  <div class="num_name fr" style="margin-top: 10%">数量：</div>
                </div>
              </el-col>
              <el-col :span="20">
                <div class="num_add fl align-center">
                  <el-input-number v-model="number" @change="handleChange" :min="1" :max="goods.inventory"
                                   label="描述文字"></el-input-number>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
<!--          <el-col :span="12">-->
<!--            <div class="operate_btn text-center">-->
<!--              <a href="" class="buy_btn">立即购买</a>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="12">
            <div class="operate_btn text-center" @click="addCart">
              <a class="add_cart">加入购物车</a>
            </div>
          </el-col>
        </el-row>

      </div>

      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
        <!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
    </el-dialog>


  </div>

</template>

<script>
import {headUrl} from "../../../utils/common";
import {addCar} from "../../../api/client/car";

export default {
  name: "foodInfo",
  data() {
    return {
      redirect: undefined,
      activeName: 'second',
      dialogVisible: false,
      isl: false,
      number: 1,
      medId: 0,
      //  商品详细信息
      goods: {
        medMunber: 1,
      },
    }
  },
  methods: {
    addCart() {
      if (this.isl) {
        this.goods = {
          medMunber: this.number,
          medId : this.medId
        }
        addCar(this.goods).then(response => {
          this.$modal.msgSuccess("添加成功");
          this.dialogVisible = false;
        });
      } else {
        this.$message({
          type: "error",
          message: "请先登录!"
        })
        setTimeout(()=>{
          this.$router.push("/login")
        },1000)
      }
    },
    toLogin(){
      this.$router.push("/login")
    },

    //计数器改变执行方法
    handleChange(value) {
      console.log(value);
    },
    handleClose(done) {
      this.dialogVisible = false
      this.rest()
    },
    //  关闭弹窗
    close() {
      this.dialogVisible = false
      this.rest()
    },
    //  开启弹窗
    open(item, isl) {
      this.isl = isl
      this.dialogVisible = true
      this.goods = item;
      this.medId = item.medId
    },
    //数据重置
    rest() {
      this.number = 1
      this.goods = {
        medImage: "",
        medName: "",
        medInfo: "",
        inventory: "",
        untitled: "",
        medMunber:"",
        medId:""
      }
      this.number = 1
      this.medId = 0
    },

    getUrl(url) {
      return headUrl + url
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.structure {
  //margin-top: 80px;
  //margin-left: 250px;
  //margin-right: 250px;
  //text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
}

.structure3 {
  margin-top: 60px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}


.center_con {
  //width: 600px;
  //height: 350px;
  //text-align: center;
}

.center_con .main_menu {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
}

.goods_detail_list {
  //width:600px;
  //height:350px;
}

.goods_detail_list h3 {
  font-size: 20px;
  line-height: 20px;
  color: #666;
  font-weight: normal;
}

.goods_detail_list p {
  color: #666;
  line-height: 40px;
}

.prize_bar {
  height: 72px;
  background-color: #fff5f5;
  line-height: 72px;
}

.prize_bar .show_prize {
  font-size: 20px;
  color: #ff3e3e;
  padding-left: 20px
}

.prize_bar .show_pirze em {
  font-style: normal;
  font-size: 36px;
  padding-left: 10px
}

.total {
  height: 35px;
  line-height: 35px;
  margin-top: 25px;
  /*background: yellow;*/
}

.total em {
  font-style: normal;
  color: #ff3e3e;
  font-size: 18px
}

.operate_btn {
  height: 40px;
  margin-top: 15px;
  font-size: 0;
  position: relative;
}

.operate_btn .buy_btn, .operate_btn .add_cart {
  display: inline-block;
  width: 178px;
  height: 38px;
  border: 1px solid #c40000;
  font-size: 14px;
  color: #c40000;
  line-height: 38px;
  text-align: center;
  background-color: #ffeded;
}

.operate_btn .add_cart {
  background-color: #c40000;
  color: #fff;
  margin-left: 10px;
  position: relative;
  z-index: 10;
}

</style>
